<template>
  <div>
    <div class="az" v-if="attrStatus.selectShow">
      <span @click="getClass(index,item)" :class="{active:index===attrStatus.classIndex}" v-for="(item, index) in arr" :key="index">{{item}}</span>
    </div>
    <div class="az" v-if="attrStatus.attrShow">
      <span @click="getAttr(index,item)" :class="{active:index===attrStatus.classIndex}" v-for="(item, index) in arr" :key="index">{{item}}</span>
    </div>
    <el-table :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border fit
              style="width: 100%" max-height="580"  @header-click="classClick">
      <el-table-column width="220px" align="center" label="id" v-if="false">
        <template slot-scope="scope">
          <span>{{scope.row.id}}</span>
        </template>
      </el-table-column>
      <el-table-column width="220px" align="center" label="分类" v-if="false">
        <template slot-scope="scope">
          <span>{{scope.row.attr_type}}</span>
        </template>
      </el-table-column>
      <el-table-column width="220px" align="center" label="一个字描述" v-if="false">
        <template slot-scope="scope">
          <span>{{scope.row.attr_short_name}}</span>
        </template>
      </el-table-column>
      <el-table-column width="220px" align="center" label="一级属性id" v-if="false">
        <template slot-scope="scope">
          <span>{{scope.row.class_1_id}}</span>
        </template>
      </el-table-column>
      <el-table-column width="220px" align="center" :label="attrStatus.className" class="aaaaaaaaaaaaaaaaaaaaaaaaaaaaa1">
        <template slot-scope="scope">
          <span>{{scope.row.attr_name}}</span>
        </template>
      </el-table-column>
      <el-table-column width="300px" align="center" :label="attrStatus.attrName" class="aaaaaaaaaaaaaaaaaaaaaaaaa2">
        <template slot-scope="scope">
          <span>{{scope.row.class_1_name}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="创建时间" width="300px">
        <template slot-scope="scope">
          <span>{{scope.row.create_time | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="最后修改时间" width="300px">
        <template slot-scope="scope">
          <span>{{scope.row.update_time | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="状态" width="220px">
        <template slot-scope="scope">
          <span>{{scope.row.status_text}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" min-width="220px">
        <template slot-scope="scope">
          <span class="b1" v-if="scope.row.can_up=='1'">
            <el-button type="warning" icon="el-icon-edit" circle @click="handleProp(scope.row)"></el-button>修改
          </span>
          <span class="b2" v-if="scope.row.action_status=='1'">
            <el-button type="success" icon="el-icon-delete" circle @click="deleteProp(scope.row)"></el-button>删除
          </span>
          <!-- <div v-if="scope.row.action_status=='2'||scope.row.action_status=='3'">
            <el-tooltip :content="scope.row.action_status=='2'?'操作: 停用':'操作: 重启'" placement="top">
              <el-switch
                v-model="actionStatus[scope.row.num]"
                @change="changeStatus(scope.row)"
                active-color="#4b9dfa"
                inactive-color="#ff4949"
                active-value="100"
                inactive-value="0">
              </el-switch>
            </el-tooltip>
          </div> -->
          <span class="b3" v-if="scope.row.action_status=='2'">
            <el-button type="danger" icon="el-icon-refresh" circle @click="updateStatus(scope.row)"></el-button>停用
          </span>
          <span class="b4" v-if="scope.row.action_status=='3'">
            <el-button type="danger" icon="el-icon-refresh" circle @click="updateStatus(scope.row)"></el-button>重启
          </span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<style scoped>
  .b1 {
    color: #f8a631;
    margin-right: 15px;
    display: inline-block;
  }
  .b1 button {
    margin-right: 5px;
    padding: 6px;
  }
  .b2 {
    color: #63c847;
    margin-right: 15px;
    display: inline-block;
  }
  .b2 button {
    margin-right: 5px;
    padding: 6px;
  }
  .b3 {
    color: #fc4f4f;
    margin-right: 15px;
    display: inline-block;
  }
  .b3 button {
    margin-right: 5px;
    padding: 6px;
  }
  .b4 {
    color: #fc4f4f;
    margin-right: 15px;
    display: inline-block;
  }
  .b4 button {
    margin-right: 5px;
    padding: 6px;
  }
  .az {
    width: 100%;
    padding: 2px 30px;
    background: #f5f5f5;
  }
  .az span {
    width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 50%;
    color: #666;
    text-align: center;
    display: inline-block;
    cursor: pointer;
  }
  .az span:hover {
    background: #dbdbdb;
  }
  .active {
    background: #dbdbdb;
  }
</style>
<script>
  export default {
    props: {
      list: Array,
      listLoading: Boolean,
      tab: String,
      attrStatus: Object,
      isChange: Boolean
    },
    data() {
      return {
        actionStatus: [],
        arr: ['全', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
      }
    },
    created() {
    },
    mounted() {
    },
    watch: {
      // list(curr, old) {
      //   for (let i = 0; i < this.list.length; i++) {
      //     if (this.list[i].action_status === '2') {
      //       this.$set(this.actionStatus, this.list[i].num, '100')
      //     } else if (this.list[i].action_status === '3') {
      //       this.$set(this.actionStatus, this.list[i].num, '0')
      //     }
      //   }
      // }
    },
    methods: {
      // changeStatus(row) {
      //   this.$emit('updateStatus', row)
      //   if (this.isChange) {
      //     if (this.actionStatus[row.num] === '100') {
      //       this.$set(this.actionStatus, this.actionStatus[row.num], '0')
      //     }
      //     if (this.actionStatus[row.num] === '0') {
      //       this.$set(this.actionStatus, this.actionStatus[row.num], '100')
      //     }
      //   }
      // },
      classClick(row) {
        // if (row.label === '属性名称▼') {
        //   this.attrStatus.selectShow = true
        //   this.attrStatus.className = '属性名称▲'
        //   this.attrStatus.attrShow = false
        //   this.attrStatus.attrName = '归属分类▼'
        //   this.attrStatus.classIndex = null
        // }
        // if (row.label === '归属分类▼') {
        //   this.attrStatus.attrShow = true
        //   this.attrStatus.attrName = '归属分类▲'
        //   this.attrStatus.selectShow = false
        //   this.attrStatus.className = '属性名称▼'
        //   this.attrStatus.classIndex = null
        // }
        if (!this.attrStatus.attrShow) {
          if (row.label === '属性名称▲') {
            this.attrStatus.selectShow = false
            this.attrStatus.className = '属性名称▼'
            this.attrStatus.classIndex = null
          }
          if (row.label === '属性名称▼') {
            this.attrStatus.selectShow = true
            this.attrStatus.className = '属性名称▲'
          }
        }
        if (!this.attrStatus.selectShow) {
          if (row.label === '归属分类▼') {
            this.attrStatus.attrShow = true
            this.attrStatus.attrName = '归属分类▲'
          }
          if (row.label === '归属分类▲') {
            this.attrStatus.attrShow = false
            this.attrStatus.attrName = '归属分类▼'
            this.attrStatus.classIndex = null
          }
        }
      },
      getAttr(index, letter) {
        this.attrStatus.classIndex = index
        this.$emit('selectAttrProp', letter)
      },
      getClass(index, letter) {
        this.attrStatus.classIndex = index
        this.$emit('selectClassProp', letter)
      },
      handleProp(row) {
        if (this.tab === '1') {
          this.$emit('updateFirstProp', row)
        } else if (this.tab === '2') {
          this.$emit('updateSecondProp', row)
        }
      },
      deleteProp(row) {
        this.$emit('deleteProp', row)
      },
      updateStatus(row) {
        this.$emit('updateStatus', row)
      }
    }
  }
</script>
